<template>
  <div>
    <p>vuex的使用</p>
    <p>获取store中的公用数据：{{ $store.state }}</p>
    <p>获取store中的getters：{{ $store.getters.nextAge }}</p>
    <button @click="changeAge">年龄+1</button>
    <button @click="getList">获取分类列表</button>
  </div>
</template>

<script>
import {changeAge,saveList} from '../store/mutation_type'
export default {
  data() {
    return {
      val1: "",
    };
  },
  methods: {
    changeAge() {
      // 通过commit调用mutation 触发数据的更新
      this.$store.commit(changeAge);
    },
    changeAge2() {
      // 对象风格的提交方式
      this.$store.commit({
        type: changeAge,
      });
    },
    recharge() {
      this.$store.commit(recharge, this.val1 - 0);
    },
    recharge2() {
      this.$store.commit({
        type: recharge2,
        num: this.val1 - 0,
      });
    },
    getList() {
      // action = axios + mutation
      // 绕开action
      this.$http('http://localhost:3000/play/category')
      .then(res => {
        console.log(res);
        this.$store.commit(saveList, res)
      })
    }
  },
};
</script>

<style>
</style>